<template>
	<div>
		<Breadcrumb>
			<BreadcrumbItem>操作员管理</BreadcrumbItem>
			<BreadcrumbItem>操作员列表</BreadcrumbItem>
		</Breadcrumb>
		<Form :model="request"  inline :style="type == 1 || type == 2?'':'visibility: hidden;'">
			<FormItem>
				<Input type="text" v-model="request.username" clearable placeholder="请输入操作员" />
			</FormItem>
			<FormItem>
				<Button type="primary" @click="search"  style="margin-right: 10px">搜索</Button>
				<Button type="primary" @click="toRealod" v-if="request.pid"  style="margin-right: 10px">重置</Button>
				<!-- <Button type="primary" v-hasPermission="['20']"  @click="add" style="margin-right: 10px">添加</Button> -->
				<Button type="primary" v-hasPermission="['20']"  @click="$router.push('/user/add')" style="margin-right: 10px">添加</Button>


				<!-- <Button type="primary" @click="$router.go(-1)" style="margin-right: 10px">返回</Button> -->
			</FormItem>
		</Form>

		<!-- <div class="form_box"> -->
		<div>
			<Table :columns="infoID == 6?columns2:columns" :data="tableData" :loading="loading" :height="height">
				<template slot-scope="{ row }" slot="manager">
					<div v-if="row.manager && row.manager.username">{{row.manager.username || ''}}</div>
				</template>
				<template slot-scope="{ row }" slot="device_group">
					<div v-if="row.device_group.length>0" v-for="(item,index) in row.device_group" >{{item.group_name}}</div>
				</template>
				<template slot-scope="{ row }" slot="option">
					<Button type="success" v-hasPermission="['22']" size="small" style="margin-right: 5px" @click="add2(row)">编辑</Button>
					<Button type="error" v-hasPermission="['21']"  size="small" style="margin-right: 5px" @click="remove(row)">删除</Button>
				</template>
			</Table>



		</div>
		<Page style="display: flex;justify-content: center;margin-top: 24px;" :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer show-total
		 @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />


		<Modal v-model="modal1" :title=" form.id?'编辑操作员':'添加操作员'" @on-ok="confirm" @on-cancel="cancel" :mask-closable="false">
			<Form :label-width="110">

				<FormItem label="操作员:">
					<Input v-model="form.username"  placeholder="请输入操作员"></Input>
				</FormItem>

				<FormItem label="密码:">
					<Input v-model="form.password"  placeholder="请输入操作员密码"></Input>
				</FormItem>
				<FormItem label="经理:" v-if="infoID!=6">
					<Select  placeholder="请选择" style="width: 120px;" v-model="form.manager_id" @on-change="changeGroup">
						<Option  :value="item.id" v-for="(item,index) in accountList" :key="index">{{item.username}}</Option>
					</Select>
				</FormItem>

				<FormItem label="机器组:" v-if="groupList.length>0">
					<CheckboxGroup v-model="form.group_id" v-if="showGroup">
						<Checkbox :label="item.id" v-for="(item,index) in groupList" :key="index">{{item.name}}</Checkbox>
					</CheckboxGroup>
				</FormItem>

			</Form>
		</Modal>

	</div>
</template>

<script>

	export default {
		data() {
			return {
				height: this.$store.state.height,
				infoID:null,
				showGroup:true,
				request:{
					page:1,
					loading:false
				},
				page:{},
				modal1:false,
				modal2:false,
				type:1,//1admin 2manager 3operator
				columns: [
					{
						title: '操作员',
						key: 'username',

					},
					{
						title: '机器组经理',
						slot: 'manager',

					},
					{
						title: '机器组',
						slot: 'device_group',
					},
					{
						title: "操作",
						slot: "option",
						minWidth: 200,
						align: "center",

					}
				],
				columns2: [
					{
						title: '操作员',
						key: 'username',

					},
					{
						title: '机器组',
						slot: 'device_group',
					},
					{
						title: "操作",
						slot: "option",
						minWidth: 200,
						align: "center",

					}
				],
				tableData: [],
				form:{
					id:null,
					manager_id:null,
					username:'',
					group_id:[]
				},
				accountList:[],//经理组
				groupList:[], //机器组列表
				loading:false,
			}
		},
		created() {
			if(this.$route.query.pid){
				this.request.pid= this.$route.query.pid
			}
			this.infoID = JSON.parse(this.astgo.getItem("ys_prj_info")) .role_id;



			this.lists();
			this.getAccount();



		},
		methods: {
			toRealod(){
				this.request = {
					page:1,
					loading:false
				}
				this.search();
			},
			search(){
				this.request.page = 1;
				this.lists();
			},
			lists(){
				 this.loading = true;
				this.axios.post("device/operatorList",this.request).then(res => {
					if (res.code == 1) {
						this.loading = false;
						this.tableData = res.data.list;
						this.page.count = res.data.count; // 总条数
						this.page.curPage = res.data.curPage; // 当前页
						this.page.countPage = res.data.countPage; // 总页数
					}
				});
			},

			confirm(){
				var url = this.form.id?'device/operatorEdid':'device/addOperator';

				console.log(this.form)
				// return

				this.axios.post(url,this.form).then(res => {
					if (res.code == 1) {
						this.modal1= false
						this.lists();
						this.$Message.success("操作成功");
						this.cancel()
					}
				});
			},

			cancel(){
				this.form = {
					id:null,
					manager_id:null,
					username:'',
					group_id:[]
				}

				this.groupList = [];

			},

			add2(row){
				console.log(row)
				var arr = row.device_group || [];
				if(arr.length>0){
					for(var i = 0,len=arr.length;i<len; i++){
						this.form.group_id.push(arr[i].devicegroup_id)
					}
				}
				this.form.manager_id = row.manager?row.manager.manager_id : null;
				this.form.id = row.id;
				this.form.username = row.username;
				this.getGroup();
				this.modal1= true
			},
			add() {
				this.modal1= true;
				this.getGroup(this.infoID);
			},
			remove(row) {
				this.$Modal.confirm({
					title: "确定要删除操作员:“"+ row.username +"”吗？",
					onOk: () => {
						this.axios.post("device/delOperator",{id:row.id}).then(res => {
							if (res.code == 1) {
								this.$Message.success("删除成功");
								this.lists();
							}
						});

					},
					onCancel: () => {}
				});
			},
			getAccount(){ //获取所有经理
				this.axios.post("device/getAccount").then(res => {
					if (res.code == 1) {
						this.accountList = res.data;
					}
				});
			},

			getGroup(){ //获取经理的机器组

				if(this.form.manager_id){
					this.showGroup = false;
					this.axios.post("device/operatorGroup",{manager_id:this.form.manager_id || infoID}).then(res => {
						if (res.code == 1) {
							this.groupList = res.data;
							this.showGroup = true;
						}
					});
				}else{
					this.showGroup = false;
					this.axios.post("device/operatorGroup").then(res => {
						if (res.code == 1) {
							this.groupList = res.data;
							this.showGroup = true;
						}
					});
				}
			},

			changeGroup(e){
				if( this.form.manager_id){
					this.form.group_id = [];
					this.getGroup()
				}
			},

			handleSizeChange(val) {
				this.request.page = 1;
				this.request.limit = val;
				this.lists();
			},
			handleCurrentChange(val) {
				this.request.page = val;
				this.lists();
			},

		}
	}
</script>

<style>
</style>
